<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>珠峰培训</title>
	<style type="text/css">
		body {
			font-size: 14px;
			font-family: "Lantinghei SC Extralight", Arial;
		}

		ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}

		a {
			text-decoration: none;
		}

		img {
			vertical-align: top;
		}

		#wrap {
			width: 760px;
			height: 260px;
			margin: 100px auto;
			padding: 145px 120px 95px;
			background: url(img/bg.jpg) no-repeat 0 0;
		}

		#section {
			width: 760px;
			height: 260px;
			-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, .2);
			box-shadow: 0px 0px 4px rgba(0, 0, 0, .2);
		}

		#choose {
			width: 760px;
			height: 50px;
			margin: 0 auto;
			background: url(img/nav_bg.png) no-repeat 0 0;
			line-height: 50px;
			text-indent: 21px;
		}

		#type {
			width: 100%;
			height: 210px;
			background: url(img/type_bg.png) no-repeat 0 0;
			padding: 17px 0 16px 28px;
		}

		#type li {
			height: 44px;
			color: #8a8a8a;
			line-height: 44px;
		}

		#type a {
			margin: 0 12px 0 11px;
			color: #000;
		}

		#choose mark {
			position: relative;
			display: inline-block;
			height: 24px;
			line-height: 24px;
			border: 1px solid #28a5c4;
			color: #28a5c4;
			margin: 12px 5px 0;
			background: none;
			padding: 0 30px 0 6px;
			text-indent: 0;
		}

		#choose mark a {
			position: absolute;
			top: 3px;
			right: 2px;
			display: inline-block;
			width: 18px;
			height: 18px;
			background: #28a5c4;
			color: #fff;
			line-height: 18px;
			font-size: 16px;
			text-align: center;
		}
	</style>
</head>

<body>
	<div id="wrap">
		<section id="section">
			<nav id="choose">
				<!-- 你的选择:
				<mark>
					苹果
					<a href="javascript:;">x</a>
				</mark> -->
			</nav>
			<ul id="type">
				<!-- <li>
					品牌：
					<a href="javascript:;">苹果</a>
					...
				</li>
				...
			    -->
			</ul>
		</section>
	</div>

	<script src="index.js"></script>
</body>

</html>